Huge News!Announcing our $40M Series B led by Abstract Ventures.Learn More
Socket
Sign inDemoInstall
Socket

@splidejs/splide

Package Overview
Dependencies
Maintainers
1
Versions
150
Alerts
File Explorer

Advanced tools

Socket logo

Install Socket

Detect and block malicious and high-risk dependencies

Install

@splidejs/splide

Splide is a lightweight, flexible and accessible slider/carousel. No dependencies, no Lighthouse errors.

  • 3.6.12
  • Source
  • npm
  • Socket score

Version published
Weekly downloads
164K
decreased by-19.12%
Maintainers
1
Weekly downloads
 
Created

What is @splidejs/splide?

@splidejs/splide is a lightweight, flexible, and powerful JavaScript slider and carousel library. It provides a wide range of features to create responsive, touch-friendly, and customizable sliders and carousels for web applications.

What are @splidejs/splide's main functionalities?

Basic Slider

This code initializes a basic slider using the Splide library. The '.splide' selector targets the HTML element that will contain the slider, and the 'mount()' method sets up the slider.

const splide = new Splide('.splide');
splide.mount();

Autoplay

This code initializes a slider with autoplay functionality. The 'type' option is set to 'loop' to create an infinite loop of slides, and 'autoplay' is set to true to enable automatic sliding.

const splide = new Splide('.splide', {
  type   : 'loop',
  autoplay: true,
});
splide.mount();

Custom Pagination

This code demonstrates how to create a custom pagination for the slider. The 'pagination' option is set to false to disable the default pagination, and a custom pagination element is created and mounted using the 'pagination:mounted' event.

const splide = new Splide('.splide', {
  pagination: false,
});
splide.mount();

const pagination = document.createElement('ul');
pagination.className = 'splide__pagination';

splide.on('pagination:mounted', function (data) {
  data.list = pagination;
});

Responsive Breakpoints

This code configures the slider to be responsive to different screen sizes. The 'breakpoints' option allows you to specify different settings for different screen widths. In this example, the slider will show 1 slide per page on screens smaller than 640px and 2 slides per page on screens smaller than 1024px.

const splide = new Splide('.splide', {
  breakpoints: {
    640: {
      perPage: 1,
    },
    1024: {
      perPage: 2,
    },
  },
});
splide.mount();

Other packages similar to @splidejs/splide

Keywords

FAQs

Package last updated on 26 Jan 2022

Did you know?

Socket

Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.

Install

Related posts

SocketSocket SOC 2 Logo

Product

  • Package Alerts
  • Integrations
  • Docs
  • Pricing
  • FAQ
  • Roadmap
  • Changelog

Packages

npm

Stay in touch

Get open source security insights delivered straight into your inbox.


  • Terms
  • Privacy
  • Security

Made with ⚡️ by Socket Inc